﻿@using System.Data.Entity
@using ExpressQuiz.Extensions
@model ExpressQuiz.ViewModels.EditQuestionViewModel



<div>
    <ul class="breadcrumb" style="margin-bottom: 5px;">
        <li>
            @Html.ActionLink("Quiz", "Edit", new { id = Model.QuizId })
        </li>

        <li class="active">Question</li>
    </ul>

</div>

@using (Ajax.BeginForm("EditQuestion", "Quizzes", new AjaxOptions()
{
    UpdateTargetId = "content",
    HttpMethod = "Post",
    InsertionMode = InsertionMode.Replace,
    OnSuccess = "applyValidation",
    OnFailure = "handleError",
    OnBegin = "beforePost",

}))
{
    <div class="form-horizontal">
        
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Question.QuestionId)
        @Html.HiddenFor(model => model.Order)
        @Html.HiddenFor(model => model.QuizId)
        @Html.HiddenFor(model => model.Question.Points)

        <div class="form-group">
            @Html.LabelFor(model => model.Question.Text, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Question.Text, new { htmlAttributes = new { @class = "form-control pagedown", @rows = 10 } })
                @Html.ValidationMessageFor(model => model.Question.Text, "", new { @class = "text-danger" })



            </div>
        </div>

        @if (Model.IsTimeable)
        {
            <div class="form-group">

                @Html.LabelFor(model => model.Question.EstimatedTime, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-2">
                    @Html.EditorFor(model => model.Question.EstimatedTime, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Question.EstimatedTime, "", new { @class = "text-danger" })
                </div>

            </div>
        }
        else
        {
            @Html.HiddenFor(model => model.Question.EstimatedTime)
        }

        @if (Model.AllowPoints)
        {
            <div class="form-group">

                @Html.LabelFor(model => model.Question.Points, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-2">
                    <input id="points" class="form-control" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="10"
                           data-slider-step="0.1" data-slider-value="@Model.Question.Points" />


                </div>

            </div>
        }
        else
        {
           
        }
        <div class="form-group">
            
            <div class="row">
                <div class="col-md-4">
                
                    @Ajax.ActionLink("Add answer", "CreateAnswer", "Quizzes", new { id = Model.Question.QuestionId, orderId = Model.Question.AnswerCount }, new AjaxOptions()
                                    {
                                        InsertionMode = InsertionMode.Replace,
                                        HttpMethod = "Get",
                                        UpdateTargetId = "content",
                                        OnSuccess = "applyValidation",
                                        OnFailure = "handleError"

                                    }, htmlAttributes: new { @class = "btn btn-primary" })
                    
                    
                    <button type="submit" class="btn btn-primary has-spinner">
                        <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span>
                        Save
                    </button>

                </div>
            </div>

         
               
        
        </div>

        <hr />
      


        <table id="answersTbl" class="table table-striped table-hover table-bordered">
            <thead>
                <tr>
                    <td></td>
                    <td>Answer</td>
                    <td>Is correct</td>
                </tr>

            </thead>
            <tbody>
                @{

    foreach (var a in Model.Question.Answers.OrderBy(x => x.OrderId))
    {

        <tr id="@a.AnswerId">
            <td class="dragHandle"></td>
            <td>
                @a.Text
            </td>
            <td>
                @a.IsCorrect
            </td>
            <td>
                @Ajax.ActionLink("Edit", "EditAnswer", "Quizzes", new { id = a.AnswerId }, new AjaxOptions()
                {
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "Get",
                    UpdateTargetId = "content",
                    OnSuccess = "applyValidation",
                    OnFailure = "handleError"

                })

            </td>
            <td>
                <a href="#" data-id="@a.AnswerId" class="delete-answer">Delete</a>

            </td>
        </tr>

    }
                }
            </tbody>

        </table>

    </div>


}




<script>
    $(function () {

        $("textarea.pagedown").pagedownBootstrap({
            'sanatize': true
        });

        $('.wmd-preview').addClass('well');

        $("#answersTbl").tableDnD({
            onDrop: function (table, row) {
                var rows = table.tBodies[0].rows;
                var ids = "";
                for (var i = 0; i < rows.length; i++) {
                    if (rows[i] !== undefined) {
                        ids += rows[i].id + ",";
                    }
                }
                $("#Order").val(ids);
            }
        });

        $("#answersTbl tr").hover(function () {
            $(this.cells[0]).addClass('showDragHandle');
        }, function () {
            $(this.cells[0]).removeClass('showDragHandle');
        });



        $('#points').slider({
            formater: function (value) {
                return Math.round(value);
            }
        });

        $('#points').on('slide', function (slideEvt) {
           
            $('#' + '@Html.IdFor(m=>m.Question.Points)').attr("value", Math.round(slideEvt.value));
        });


        $('.delete-answer').click(function () {

            $.ajax({
                url: "/Quizzes/DeleteAnswer/" + this.getAttribute("data-id"),
                type: 'POST',
                headers: ExpressQuiz.AjaxHelper.createRequestionVerificationTokenHeader(),
                success: function (result) {
                    $("#content").empty().html(result);

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    handlerError(jqXHR.responseText);

                }
            });

            return false;
        });
    });

</script>
